<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">
			<!-- 顶部 -->
			<div class="header">
				<!-- <img class="head-bg" src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/20250718inu19c.png"
					alt=""> -->
				<div class="pl-50 pt-100">
					<div class="text fontS48 lh-50 font-bold">慧心服务 成就精英</div>
					<div class="text mt-26 color-3 fontS28 lh-44">解决就业创业难题</div>
				</div>
				<div class="flex-center headBtn">
					<image src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/pic222@2x.png"
						class="head-bgIcon">
					</image>
					<div @click="toJob">
						<image src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/sv_01@2x.png"
							class="head-icon"></image>
						<div class="mt-16 fontS30 font-bold">找工作</div>
						<div class="fontS24 mt-4 color-6d">海量工作机会</div>
					</div>
					<div class="ml-20" @click="toPerson">
						<image src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/e26a@2x.png"
							class="head-icon"></image>
						<div class="mt-16 fontS30 font-bold">性格测试</div>
						<div class="fontS24 mt-4 color-6d">更加了解自己</div>

					</div>
				</div>
			</div>
			<!-- 内容 -->
			<div class="main">
				<!-- 补贴申领 -->
				<view class="subsidy-banner" @click="goSubsidy">
					<view class="subsidy-text">
						<text class="subsidy-title">补贴申领 (就业补贴、创业补贴)</text>
						<text class="subsidy-subtitle">社保补贴、住房租赁补贴、创业补贴等</text>
					</view>
					<uni-icons type="arrow-right" size="20" color="#3074FE"></uni-icons>
				</view>
				<div class="grid-menu-section mb-20" v-for="(item, itemIndex) in serveList" :key="itemIndex"
					v-if="item.serveDtos && item.serveDtos.length > 0">
					<div class="pl-30 fontS30 mb-20 font-bold">{{ item.typeName }}</div>
					<view class="grid">
						<view class="grid-item" @click="goDetail('serve', items)" v-for="(items, i) in item.serveDtos"
							:key="i">
							<image :src="baseUrl + items.iconUrl" class="grid-icon"></image>
							<text class="grid-text">{{ items.serveName }}</text>
						</view>
					</view>
				</div>


			</div>

		</div>

		<bottom-tab-bar :tabIndexs="tabNum" :unRead="unRead" />

	</view>
</template>

<script>
import { findServeTreePersonal } from "@/api/serve";
import { unReadCount } from '@/api/message'
export default {

	data() {
		return {
			unRead: 0,
			tabNum: 1,
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,
			serveList: [],
			loading: false



		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	async onShow() {
		this.tabNum = 1
		this.$forceUpdate()
		if (this.userInfo && this.userInfo.userType) {
			await this.getUnReadCount()
		}
	},
	async onPullDownRefresh() {
		this.tabNum = 1
		this.$forceUpdate()
		if (this.userInfo && this.userInfo.userType) {
			await this.getUnReadCount()
		}
		uni.stopPullDownRefresh()
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},
	mounted() {


	},

	async onLoad(option) {
		console.log(this.userInfo)

		let custom = wx.getMenuButtonBoundingClientRect()
		this.btnRight = uni.upx2px(30) + custom.width


		this.custom = custom
		this.navTop = custom.top - this.statusBarHeight

		await this.getserveList()
	},


	methods: {
		async getUnReadCount() {
			const { data } = await unReadCount()
			getApp().globalData.unReadCount = data
			this.unRead = data
		},
		toJob() {
			uni.navigateTo({
				url: '/pages/index/jobList'
			})
		},
		toPerson() {
			uni.showToast({ title: '功能暂未开发', icon: 'none' })
		},

		// 服务列表
		async getserveList() {
			const {
				data
			} = await findServeTreePersonal({
				parentTypeId: 0
			});
			this.serveList = data
			this.loading = true
		},
		goSubsidy() {
			uni.navigateTo({
				url: '/pages/index/subsidy'
			})
		},
		// 跳转服务详情
		goDetail(type, item) {
			uni.navigateTo({
				url: `/pages/service/serviceDetail?serveId=${item.serveId}`
			})
		},

		toDetail(item) {
			uni.navigateTo({
				url: `/pages/service/tutorDetail?serveId=${this.serveId}&tutorId=${item.tutorId}`
			})
		},

	},


};
</script>

<style lang="less" scoped>
@import url(index.less);

.header {
	position: relative;
	height: 500upx;

	.head-bg {
		width: 100%;
		height: 500upx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.text {
		position: relative;
		z-index: 1;
	}
}

page {
	background-color: #f7f7f7 !important;
}

.content {
	// padding: 0 20upx;
	background: linear-gradient(180deg, #dcffed 100upx, #f7f7f7 300upx);

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}

.contentBox {
	// padding: 20rpx;
}

.grid-menu-section {
	background-color: #fff;
	padding-top: 30upx;
	padding-bottom: 10upx;
	border-radius: 16upx;
	position: relative;

	.grid-swiper {
		// min-height: 200upx;
		// height: auto !important;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

		.grid-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 30upx;

			.grid-icon {
				width: 80upx;
				height: 80upx;
				margin-bottom: 8upx;
			}

			.grid-text {
				font-family: 'PingFang SC', '苹方-简', 'Microsoft YaHei', Arial, sans-serif;
				text-align: center;
				color: rgba(0, 0, 0, 0.85);
				font-size: 24upx;
				line-height: 40upx;
			}
		}
	}

	.custom-grid-indicator {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		pointer-events: none;
		border-radius: 100upx;

		.grid-indicator-dot {
			width: 8upx;
			height: 8upx;
			background: #d8d8d8;
			border-radius: 50%;
			margin: 0 8upx;
			opacity: 0.7;
			transition: all 0.2s;

			&.active {
				width: 24upx;
				height: 8upx;
				border-radius: 8upx;
				opacity: 1;
				background: #b0b0b0;
			}
		}
	}
}

.headBtn {
	position: absolute;
	bottom: 0upx;
	left: 0;
	width: 100%;
	height: 220upx;
	z-index: 999;
	padding: 0 20upx;

	.head-bgIcon {
		position: absolute;
		top: -160upx;
		right: 40upx;
		width: 280upx;
		height: 220upx;
		z-index: 996;

	}

	&>div {
		position: relative;
		z-index: 999;
		width: 50%;
		height: 220upx;
		// border: 2px solid #fff;
		background: linear-gradient(#F0f8ff 0%, #fff 100%);
		box-shadow: 2px 2px 4px #e2e2e2;
		border-radius: 16upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.head-icon {
			width: 80upx;
			height: 80upx;
		}

	}

}
</style>